<template>
    <div>
        <el-card>
            <h3>模型配置</h3>
        </el-card>
        <el-card v-if="this.UserRole=='guest'">
            <h2>请联系管理员配置模型</h2>
        </el-card>
        <el-card v-else>
            <div>
                <el-form :inline="true" :model="DownUpline">
                    <!-- <el-form-item label="上传用户:">
                        <el-input v-model="DownUpline.DownUser" placeholder="用户ID/账号" clearable></el-input>
                    </el-form-item>
                    <el-form-item label="文件名:">
                        <el-input v-model="DownUpline.DownName" placeholder="用户ID/账号" clearable></el-input>
                    </el-form-item> -->
                    <el-form-item>
                        <el-button type="primary" @click="getMObanLost">查询</el-button>
                    </el-form-item>
                    <el-form-item>
                        <el-button @click="Resetting">重置</el-button>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="AddMoxing">添加模型</el-button>
                    </el-form-item>
                </el-form>
            </div>
            <el-table :data="TemplateDown" style="width: 100%">
                <el-table-column prop="createTime" label="时间">
                </el-table-column>
                <el-table-column prop="modelKey" label="模型标识key">
                </el-table-column>
                <el-table-column prop="modelName" label="模型名称">
                </el-table-column>
                <el-table-column prop="price" label="模型价格">
                </el-table-column>
                <!-- <el-table-column prop="payPrice" label="payPrice">
                </el-table-column> -->
                <el-table-column prop="username" label="用户">
                </el-table-column>
                <el-table-column prop="enable" label="是否启用">
                    <template slot-scope="scope">
                        <el-switch v-model="scope.row.enable"  @change="changeSwitch(scope.row)">
                        </el-switch>
                    </template>
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button type="text" icon="el-icon-delete" plain @click="DelMoban(scope.row)"
                            size="mini">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <el-dialog title="添加模版" :visible.sync="dialogVisible" width="30%">

                <el-form :inline="true" :model="formInline" class="demo-form-inline">
                    <el-form-item label="模型">
                        <el-input v-model="formInline.modelKey" placeholder="模型"></el-input>
                    </el-form-item>
                    
                    <el-form-item label="模型名称">
                        <el-input v-model="formInline.modelName" placeholder="模型名称"></el-input>
                    </el-form-item>
                </el-form>


                <span slot="footer" class="dialog-footer">
                    <el-button @click="dialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="AddModelXing">确 定</el-button>
                </span>
            </el-dialog>
            <!-- <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
          :page-sizes="[10, 50, 100, 1000]" :page-size="10" layout="total, sizes, prev, pager, next, jumper"
          :total="TemplateDown.total" style="margin: 20px 0;float: right;">
        </el-pagination> -->
        </el-card>
    </div>
</template>

<script>
import { MoXingConList, ModelDown, AddMoXing, QiDisableMx, DelMoXing } from '@/api/table'
import request from '../../../vue.config'
export default {
    data() {
        return {
            TemplateDown: [],
            DownUpline: {
                DownUser: '',
                DownName: ''
            },
            pageCode: 1,
            pageSize: 10,
            RequestUrl: '',
            dialogVisible: false,
            formInline: {
                modelKey: '',
                modelName: ''
            },
            ShowUsername:'',
            UserRole:''
        };
    },
    created() {
        this.getMObanLost()
        this.RequestUrl = request.devServer.proxy["/api"].target
        this.ShowUsername = localStorage.getItem('CsvUsername');
        this.UserRole = localStorage.getItem('CsvRole');
    },
    methods: {
       async changeSwitch(row){
            console.log(row)
            const form = new FormData();
            form.append("umId", row.umId);
            form.append("enable", row.enable);
            // let dataswitch = {
            //     umId: row.umId,
            //     enable: row.enable
            // }
            let res = await QiDisableMx(form)
        },
        async DelMoban(row){
            let data = {
                umId: row.umId
            }
            let res = await DelMoXing(data)
        },
        async AddModelXing(){
            const form = new FormData();
            form.append("modelKey", this.formInline.modelKey);
            form.append("modelName", this.formInline.modelName);
            form.append("username", this.ShowUsername);
            // let data = {
            //     modelKey: this.formInline.modelKey,
            //     modelName: this.formInline.modelName,
            //     username: this.ShowUsername
            // }
            let res = await AddMoXing(form)
            this.dialogVisible = false
        },
        // 添加模型弹窗
        AddMoxing() {
            this.dialogVisible = true
        },


        async getMObanLost() {
            MoXingConList().then(res => {
                if (res.code === 1000) {
                    this.TemplateDown = res.data
                } else {
                    this.$message({
                        message: res.message,
                        type: 'error',
                        duration: 1000
                    });
                }
            })
        },

        // 下载
        async downLoadFile(row) {
            const DownUrl = this.RequestUrl + `/datac/model/download?modelKey=${row.modelKey}`
            // console.log(DownUrl,"下载地址")
            window.open(DownUrl, '_blank')
        },

        async handleSizeChange(val) {
            this.pageSize = val;
            this.getMObanLost()
        },
        async handleCurrentChange(val) {
            this.pageCode = val;
            this.getMObanLost()

        },


        // 清空每一项的值
        clearObject(obj) {
            for (let key in obj) {
                if (obj.hasOwnProperty(key)) {
                    obj[key] = '';
                }
            }
        },




        // 重置
        Resetting() {
            this.clearObject(this.DownUpline)
            this.getMObanLost()
        }
    },
};
</script>

<style lang="scss" scoped></style>